<template>
    <el-card>
       <template #header>
           <div class="card-header">
               <span>新增电影排片</span>
               <span @click="$router.push({name:'PlanInfoList'})">返回列表</span>
           </div>
       </template>
       <!-- 表单 -->
       <!--进行表单验证 1.ref="adminInfoForm" -->
       <el-form ref="planInfoForm" label-width="100px" :model="planInfoData" :rules="planInfoDataRules">
           <el-form-item label="排片时间" prop="plan_time">
               <el-date-picker 
                   v-model="planInfoData.plan_time"
                   type="datetime"
                   placeholder="请选择排片时间"
                   value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;"/>
           </el-form-item>
           <el-form-item label="电影" prop="mid">
               <el-select placeholder="请选择电影" v-model="planInfoData.mid" filterable>
          
               </el-select>
           </el-form-item>
           <el-form-item label="影厅" prop="hid">
               <el-input placeholder="请选择影厅" v-model="planInfoData.hid"></el-input>
           </el-form-item>
           <el-form-item label="价格" prop="price">
               <el-input placeholder="请输入价格" v-model="planInfoData.price"></el-input>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="submitForm">保存数据</el-button>
               <el-button type="danger" @click="resetForm">重置表单</el-button>
           </el-form-item>
       </el-form>
    </el-card>
</template>
<script>
import API from "../../utils/API/index.js";
import { ElMessage,ElMessageBox } from "element-plus";
export default {
    name: 'AddPlanInfo',
    data() {
        //1.函数返回的对象，才是页面上的数据
        return {
            planInfoData: {
                plan_time:"",
                hid:"",
                mid:"",
                price:"",
                choose_site:""
            },
            //2.制定验证规则
            planInfoDataRules: {
                plan_time:[
                    {required:true,message:"请选择排片时间",triiger:"blur"},
                ],
                hid:[
                     { required: true, message: "影厅不能为空", trigger: "blur" },
                ],
                mid:[
                    { required: true, message: "电影不能为空", trigger: "blur" },
                ],
                price:[
                    { required: true, message: "确认密码不能为空", trigger: "blur" },
                    {
                      pattern: /^\d+(\.\d+)?$/,
                      message: "请输入正确的价格",
                      trigger: "blur",
                    },
                ],
                choose_site:[
                    { required: true, message: "排片场次不能为空", trigger: "blur" },
                ],

            }
        };
    },
    //负责页面事件
    methods:{
        submitForm() {
            //2.开始验证全部的表单数据
            this.$refs["planInfoForm"].validate(async valid=>{
                if(valid) {
                    //验证成功，可以提交数据
                    try {
                        let resp = await API.planInfo.add(this.planInfoData).then(resp=>{}).catch(error=>{});
                        //console.log("成功",resp);
                        //ElMessage弹出一个成功的消息，然后跳转到列表页面 AdminInfoList
                        ElMessage.success("添加成功");
                        this.$router.replace({ name:"planInfoList"});
                    } catch(error) {
                        // console.log("失败",error);
                        ElMessageBox.alert("添加失败","提示",{
                            type:"error",
                        });
                    }
                }
            });
        },
        resetForm() {
            //重置表单
            this.$refs["planInfoForm"].resetFields();
        }
    },
};
</script>
<style lan="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>